<dom-module id="grid-data-demos">
  <template>
    <style include="vaadin-component-demo-shared-styles">
      :host {
        display: block;
      }
    </style>

    <h3>Assigning Array Data</h3>
    <p>
      An array of data objects can be assigned as the grid's <code>items</code> property.
      Each object in the array represents a row in the grid's body.
    </p>
    <p>
      The <code>items</code> array can be dynamically modified with Polymer's array mutation methods or by
      reassigning the <code>items</code> property with a new array instance.
    </p>

    <vaadin-demo-snippet id='grid-data-demos-dynamic-array-data'>
      <template preserve-content>
        <style>
          vaadin-button {
            margin-bottom: 20px;
          }
        </style>
        <vaadin-button id="add-btn">Add Item</vaadin-button>
        <vaadin-button id="remove-btn">Remove Item</vaadin-button>

        <vaadin-grid aria-label="Dynamic Data Example">
          <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
          <vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
        </vaadin-grid>
        <script>
          window.addDemoReadyListener('#grid-data-demos-dynamic-array-data', function(document) {
            const grid = document.querySelector('vaadin-grid');

            const addBtn = document.querySelector('#add-btn');
            addBtn.addEventListener('click', function() {
              grid.push('items', Vaadin.GridDemo.users[grid.items.length]);
            });

            const removeBtn = document.querySelector('#remove-btn');
            removeBtn.addEventListener('click', function() {
              grid.pop('items');
            });

            grid.items = Vaadin.GridDemo.users.slice(0, 6);
          });
        </script>
      </template>
    </vaadin-demo-snippet>


    <h3>Dynamic Height</h3>
    <p>
      Setting <code>height-by-rows</code> will make <code>&lt;vaadin-grid&gt;</code> grow
      and shrink in height depending on the number of rows.
    </p>
    <p>
      <b>Note:</b> <code>heightByRows</code> disables the grid's virtual scrolling so that all the rows are rendered in the DOM at once.
      If the grid has a large number of items, using the feature is discouraged to avoid performance issues.
    </p>
    <vaadin-demo-snippet id="grid-data-demos-dynamic-height" when-defined="vaadin-grid">
      <template preserve-content>
        <style>
          vaadin-button {
            margin-bottom: 20px;
          }
        </style>
        <vaadin-button id="add-btn">Add Item</vaadin-button>
        <vaadin-button id="remove-btn">Remove Item</vaadin-button>

        <vaadin-grid aria-label="Dynamic Data Example" height-by-rows>
          <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
          <vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
        </vaadin-grid>
        <script>
          window.addDemoReadyListener('#grid-data-demos-dynamic-height', function(document) {
            const grid = document.querySelector('vaadin-grid');

            const addBtn = document.querySelector('#add-btn');
            addBtn.addEventListener('click', function() {
              grid.push('items', Vaadin.GridDemo.users[grid.items.length]);
            });

            const removeBtn = document.querySelector('#remove-btn');
            removeBtn.addEventListener('click', function() {
              grid.pop('items');
            });

            grid.items = Vaadin.GridDemo.users.slice(0, 4);
          });
        </script>
      </template>
    </vaadin-demo-snippet>


    <h3>Assigning Remote/Function Data</h3>
    <p>
      The <code>dataProvider</code> property can be assigned a function to provide
      data from a remote source.
    </p>
    <p>
      <b>Note:</b> the total number of items must be set as the grid's <code>size</code>.
    </p>
    <p>
      Size can be provided as the second argument of the data provider <code>callback</code> also.
      See the "Tree Grid" demo for example.
    </p>
    <vaadin-demo-snippet id="grid-data-demos-assigning-remotefunction-data" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid aria-label="Remote Data Example">
          <vaadin-grid-column path="firstName"></vaadin-grid-column>
          <vaadin-grid-column path="lastName"></vaadin-grid-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
        </vaadin-grid>
        <script>
          window.addDemoReadyListener('#grid-data-demos-assigning-remotefunction-data', function(document) {
            const grid = document.querySelector('vaadin-grid');

            grid.size = 200;
            grid.dataProvider = function(params, callback) {
              var xhr = new XMLHttpRequest();
              xhr.onload = function() {
                callback(JSON.parse(xhr.responseText).result);
              };
              var index = params.page * params.pageSize;
              xhr.open('GET', 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize, true);
              xhr.send();
            };
          });
        </script>
      </template>
    </vaadin-demo-snippet>


  </template>
  <script>
    class GridDataDemos extends DemoReadyEventEmitter(GridDemo(Polymer.Element)) {
      static get is() {
        return 'grid-data-demos';
      }
    }
    customElements.define(GridDataDemos.is, GridDataDemos);
  </script>
</dom-module>
